<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="content_top">
        <h3 style="margin-left: 30px;font-size: 20px;">新建储物室</h3>
      </div>
      <!-- 基础信息 -->
      <div class="content_middle">
        <p style="margin: 20px 0 0 40px;">基础信息</p>
        <el-form :model="floorForm" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-villageForm">
          <el-form-item label="楼座" prop="bid">
            <el-select v-model="floorForm.bid" @change="unitList" placeholder="请选择" style="width: 400px;">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.building"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元" prop="uid">
            <el-select v-model="floorForm.uid" placeholder="请选择" style="width: 400px;">
              <el-option
                v-for="item in unit"
                :key="item.id"
                :label="item.unit"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="储物室号" prop="floor">
            <el-input v-model="floorForm.floor" style="width: 400px;" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input-number v-model="floorForm.floorage" style="width: 400px;" controls-position="right"  :min="1" :max="100000"></el-input-number>
            <span>&nbsp;&nbsp; 平方米</span>
          </el-form-item>
          <el-form-item label="公摊面积">
            <el-input-number v-model="floorForm.sharedArea" style="width: 400px;" controls-position="right" :min="1" :max="100000"></el-input-number>
            <span>&nbsp;&nbsp; 平方米</span>
          </el-form-item>
          <el-form-item label="实用面积">
            <el-input-number v-model="floorForm.usableArea" style="width: 400px;" controls-position="right" :min="1" :max="100000"></el-input-number>
            <span>&nbsp;&nbsp; 平方米</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" style="width: 400px;" v-model="floorForm.back"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="backspace">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueVillageAdd',

  data() {
    return {
      options: [],
      unit: [],
      floorForm: {
        cid: window.sessionStorage.getItem('vid'),
        floor: '',
        floorNumber: window.sessionStorage.getItem('villageName'),
        uid: '',
        bid: '',
        floorage: '',
        sharedArea: '',
        storageRoom: 0,
        usableArea: ''
      },
      rules: {
        bid: [
          { required: true, message: '请选择楼座', trigger: 'change' }
        ],
        uid: [
          { required: true, message: '请选择单元', trigger: 'change' }
        ],
        floor: [
          { required: true, validator: this.validateTitle, trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.listBuilding()
  },

  methods: {
    listBuilding(){ // 楼座下拉框
      this.$axios.get('/memberCjq/building/queryBuildingInfo', {
        params: {
          building: '',
          purpose: '',
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        this.options = res.data.obj.content
      })
    },
    unitList (){ // 单元下拉框
      this.$axios.get('/memberCjq/unit/queyUnitInfo', {
        params: {
          bid: this.floorForm.bid,
          unit: '',
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        this.unit = res.data.obj.content
      })
    },
    validateTitle (rules, value, callback) { // 判断储物室名称是否重复
      if (!value) {
        callback(new Error('请输入储物室名称'))
      } else {
        this.$axios.get('/memberCjq/floor/listLocker', {
          params: {
            floor: value,
            uid: this.floorForm.uid
          }
        }).then(res => {
          if (res.data.obj.flag) {
            callback(new Error('储物室名称已存在!'))
          } else {
            callback()
          }
        })
      }
    },
    submitForm(formName) { // 添加储物室
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/memberCjq/floor/saveFloorInfo', this.floorForm).then(res => {
            if (res.data.flag){
              this.MyMessage('添加成功!', 'success')
              this.insertLog('添加储物室信息')
              this.floorForm= {
                cid: window.sessionStorage.getItem('vid'),
                floor: '',
                floorNumber: window.sessionStorage.getItem('villageName'),
                uid: '',
                bid: '',
                floorage: '',
                sharedArea: '',
                storageRoom: 0,
                usableArea: ''
              }
            } else {
              this.MyMessage('添加失败，请联系管理员', 'warning')
            }
          })
        } else {
          console.log('error submit!!')
          this.MyMessage('系统有误，请联系管理员!', 'error')
          return false
        }
      })
    },
    backspace(){
      this.$router.push('/locker')
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 1000px;
  font-family: '微软雅黑';
  background: #F0F2F5;
}
.content{
  width: 1200px;
  margin: 0 auto;
  padding-top: 25px;
}
.content_top{
  width: 100%;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  background: #FFF;
}
.content_middle{
  width: 100%;
  height: 100%;
  background: #FFF;
  overflow: hidden;
  margin-top: 20px;
}
.demo-villageForm{
  width: 650px;
  height: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px dashed #d9d9d9;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.content_botton{
  width: 1200px;
  height: 300px;
  margin-top: 20px;
  overflow: hidden;
  background: #FFF;
}
::v-deep(.el-upload--picture-card){
  width: 120px;
  height: 120px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item){
  width: 120px;
  height: 120px;
}
::v-deep(.el-icon-plus){
  position: relative;
  top:-7px;
}
</style>
